var deviceNamesJson;
var regionNamesJson;
var userDatesJson;

var vm = new Vue({
	el:'#app',
});

$(function () {
	$.ajax({
		type: "POST",
	    url: $path + "/sys/userdatereport/messageList",
	    data: "",
	    success: function(r){
	    	initList(r);
	    }
	});
});

/*function downTable(){
	$.ajax({
		type: "POST",
	    url: "../sys/userdatereport/downExample",
	    data: "",
	    success: function(r){
	    }
	});
}*/


function initList(r){	
	deviceNamesJson = r.deviceNames;
	deviceNamesJson = eval('(' + deviceNamesJson + ')');
	console.log(deviceNamesJson);
	regionNamesJson = r.regionNames;
	regionNamesJson = eval('(' + regionNamesJson + ')');
	console.log(regionNamesJson);
	userDatesJson = r.userDates;
	userDatesJson = eval('(' + userDatesJson + ')');
	console.log(userDatesJson);
	
	
	var tabNode = document.getElementById('table1'); //取得自定义的表对象
	var thNode = tabNode.createTHead();
	var trNode=thNode.insertRow();	 
	var obj1 = document.createElement("TH");
	var obj2 = document.createElement("TH");
	var obj14 = document.createElement("TH");
	var obj15 = document.createElement("TH");
	var obj16 = document.createElement("TH");
	var obj17 = document.createElement("TH");
	obj1.style.cssText="text-align: center;";
	obj2.style.cssText="text-align: center;";
	obj14.style.cssText="text-align: center;";
	obj15.style.cssText="text-align: center;";
	obj16.style.cssText="text-align: center;";
	obj17.style.cssText="text-align: center;";
	


	obj1.innerHTML=" <div class='th-inner sortable both'></div>";
		obj2.innerHTML=" <div class='th-inner sortable both'>型号</div>";
			obj14.innerHTML=" <div class='th-inner sortable both'>合计</div>";
			   obj15.innerHTML=" <div class='th-inner sortable both'>系统总数据</div>";
			   	  obj16.innerHTML=" <div class='th-inner sortable both'>近一个月开机数量(去重数)</div>";
			   	     obj17.innerHTML=" <div class='th-inner sortable both'>近一个月开机率</div>";

	trNode.appendChild(obj1);
	trNode.appendChild(obj2);
	for(var k=0;k<regionNamesJson.length;k++){
		var obj = document.createElement("TH");
		obj.style.cssText="text-align: center;";
		obj.innerHTML=" <div class='th-inner sortable both'>"+regionNamesJson[k]+"</div>";
		trNode.appendChild(obj);
	}
	trNode.appendChild(obj14);
	trNode.appendChild(obj15);
	trNode.appendChild(obj16);
	trNode.appendChild(obj17);
	var tbNode = document.createElement("tbody");
	tabNode.appendChild(tbNode);
	

	for(var j=0;j<deviceNamesJson.length;j++){
		var trNode1=tabNode.insertRow();
		for(var i=0;i< regionNamesJson.length+6;i++){			
				var td1=document.createElement("td");
				if(j==0&&i==0){
					td1.rowSpan = deviceNamesJson.length;
					td1.style.cssText="white-space: nowrap; text-align: center; ";
					td1.innerHTML = "<span style='white-space:nowrap'>华为</span>";
					trNode1.appendChild(td1);	
				}else if(i==0){
					continue;
				}else if(i==1){
					td1.style.cssText="white-space: nowrap; text-align: center; ";
					td1.innerHTML = "<span style='white-space:nowrap'>"+deviceNamesJson[j]+"</span>";
					trNode1.appendChild(td1);	
				}else if(i<regionNamesJson.length+3){
				    td1.style.cssText="white-space: nowrap; text-align: center; ";
					td1.innerHTML = "<span style='white-space:nowrap'>"+userDatesJson[j].map[i-2]+"</span>";
					trNode1.appendChild(td1);	
				}else{
				    td1.style.cssText="white-space: nowrap; text-align: center; ";
					td1.innerHTML = "<span style='white-space:nowrap'></span>";
					trNode1.appendChild(td1);
				}
		}
		tbNode.appendChild(trNode1);
	}
}





